<template>
<q-page ref="ShotplanPage" class="bg-grey-10" :style-fn="handlePageHeight">
    <div v-if="!curShotplan.sp_id" class="fit row flex-center">
        <q-icon size="80px" name="mdi-calendar-blank"></q-icon>
    </div>
    <div v-else>
        <div class="text-h6 q-pa-md row items-center justify-between  no-wrap">

            <div class="row">
                {{curShotplan.sp_name}}拍摄通告
            </div>
            <q-btn v-if="curShotplan.isRemind==0" flat dense icon="mdi-bullhorn-outline" @click="handleRemind" label="提醒"></q-btn>
            <q-btn v-if="curShotplan.isRemind==1" flat dense icon="mdi-bullhorn-outline">
                <span v-if="unReadList.length==0"> 全部已读</span>
                <span v-if="unReadList.length!=0"> 已读 ({{curShotplan.readList.length}})</span>

                <q-menu dark>
                    <q-list dark dense class="p-py-sm">
                        <q-item clickable dense v-ripple v-for="item in curShotplan.readList" :key="item.username">

                            <div class="row items-center q-gutter-x-sm no-wrap">
                                <q-avatar size="20px">
                                    <img :src="item.avatar">
                                </q-avatar>
                                <span>{{item.username}} </span>
                            </div>
                        </q-item>
                        <div class="text-caption q-ml-sm" v-if="unReadList.length!==0">未读</div>
                        <q-item clickable dense v-ripple v-for="item in unReadList" :key="item.username">

                            <div class="row items-center q-gutter-x-sm no-wrap">

                                <q-avatar size="20px">
                                    <img :src="item.avatar">
                                </q-avatar>
                                <span>{{item.username}} </span>
                            </div>

                        </q-item>
                    </q-list>
                </q-menu>
            </q-btn>
        </div>
        <!-- 概况 -->
        <q-expansion-item default-opened header-class="q-pa-none" class="q-pa-none">
            <template v-slot:header>
                <tips-title title="概况" class="text-h6 full-width" lineColor="grey-6"></tips-title>
            </template>

            <q-card class=" q-pa-md bg-transparent  q-mb-sm  column item-center text-teal-2">
                <div class="q-mb-sm row  full-width">
                    <div class="col-6">
                        <div class="row items-center no-wrap">
                            <q-icon class="q-mr-sm" name="mdi-clock-time-twelve-outline"></q-icon>
                            <div>
                                {{curShotplan.date}}
                            </div>
                        </div>
                    </div>
                    <div class="col-6">

                        <div class="row items-center no-wrap">
                            <q-icon class="q-mr-sm" name="mdi-weather-cloudy"></q-icon>
                            <div class="row">
                                {{ curShotplan.weather?curShotplan.weather.textDay+' '+curShotplan.weather.tempMin+'℃'+'-'+curShotplan.weather.tempMax+'℃'+' '+curShotplan.weather.windSpeedDay+'级'+curShotplan.weather.windDirDay
                          :'暂无' }}
                            </div>
                        </div>
                    </div>
                </div>
                <div class="q-mb-sm row full-width">
                    <div class="col-6">
                        <div class="row items-center no-wrap">
                            <q-icon class="q-mr-sm" name="mdi-weather-sunset-up"></q-icon>
                            <div>
                                日出{{ curShotplan.weather?curShotplan.weather.sunrise:'暂无' }}
                            </div>
                        </div>
                    </div>
                    <div class="rol-6">
                        <div class="row items-center no-wrap">
                            <q-icon class="q-mr-sm" name="mdi-weather-sunset-down"></q-icon>
                            <div>
                                日落{{ curShotplan.weather?curShotplan.weather.sunset:'暂无' }}
                            </div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="row items-center ">
                        <q-icon class="q-mr-sm" name="mdi-clipboard-list-outline"></q-icon>设备清单
                    </div>
                    <div class="q-pl-lg">
                        {{ curShotplan.deviceList }}

                    </div>
                </div>

            </q-card>
        </q-expansion-item>
        <!-- 任务 -->
        <q-expansion-item default-opened header-class="q-pa-none" class="q-pa-none">
            <template v-slot:header>
                <div class="culumn  full-width">
                    <div class="row items-center justify-between">
                        <tips-title title="任务" :isAdd="true" @add="handleTaskDialog" class="text-h6 full-width" lineColor="grey-6"></tips-title>

                        <div class="row items-center">

                        </div>
                    </div>

                    <!-- <q-separator class="q-my-sm" color="grey-8"></q-separator> -->

                </div>

            </template>

            <q-list class="text-teal-2 q-ma-md">
                <q-item class="column q-mt-sm q-pa-none q-mb-sm shadow-7 " clickable v-for="item in taskList" :key="item.pt_id" v-ripple>
                    <q-item-section class="bg-grey-9">
                        <q-card class="  bg-transparent  column item-center">
                            <q-expansion-item dense default-opened header-class="q-pa-sm" class="q-pa-sm">
                                <template v-slot:header>
                                    <div class="culumn  full-width">
                                        <div class="row items-center justify-between">
                                            <tips-title :isPad="false" :isSeparator="false" :title="item.taskname" class="text-subtitle1" lineColor="grey-8" :tipStyle="'background:'+item.color +'!important'"></tips-title>

                                            <div class="row items-center">
                                                <q-badge class="q-px-sm q-py-xs q-mr-sm" @click.stop="handleNav(item)" outline color="cyan-4">
                                                    <q-icon name="mdi-navigation-outline"> </q-icon> 导航
                                                </q-badge>

                                                <q-badge v-if="item.task_status==0" class="q-px-sm q-py-xs" outline color="cyan-4">待开始</q-badge>
                                                <q-badge v-if="item.task_status==1" outline class="q-px-sm q-py-xs" color="blue-6">进行中</q-badge>
                                                <q-badge v-if="item.task_status==2" outline class="q-px-sm q-py-xs" color="green-6">已完成</q-badge>
                                            </div>
                                        </div>

                                    </div>

                                </template>

                                <div class="q-gutter-y-sm q-pa-sm">
                                    <div class="row q-gutter-x-md">

                                        <div class="row items-center no-wrap">
                                            <q-icon class="q-mr-xs" name="mdi-clock-time-twelve-outline"></q-icon>

                                            <div class="row">
                                                {{item.stime}}-{{item.etime}}
                                            </div>

                                        </div>

                                        <div class="row no-wrap items-center">
                                            <q-icon class="q-mr-sm" name="mdi-account-outline"></q-icon>
                                            <span class="text-bold">联系人：</span>
                                            <div class="row">
                                                {{ item.subject }}
                                            </div>

                                        </div>
                                        <div class="row items-center no-wrap">
                                            <q-icon class="q-mr-xs" name="mdi-map-marker-outline"></q-icon>
                                            <span class="text-bold">地址：</span>
                                            <div class="row">

                                                {{ item.taskAddress.name }}
                                            </div>

                                        </div>
                                        <div class="row no-wrap items-center">
                                            <q-icon class="q-mr-xs" name="mdi-cellphone"></q-icon><a class=" text-teal-2" style="text-decoration:none;" :href="'tel:'+item.concat">{{item.concat}} <span class="text-caption">(点击拨打)</span></a>

                                        </div>

                                    </div>

                                    <div class="row items-center">

                                        <q-chip class="bg-grey-7 text-teal-2" v-for="i,index in item.memberlist" :key="index">

                                            <q-avatar><img :src="i.avatar"></q-avatar>
                                            {{ i.name }}
                                        </q-chip>

                                    </div>
                                </div>

                            </q-expansion-item>

                        </q-card>
                    </q-item-section>
                </q-item>
                <!-- <q-separator /> -->
            </q-list>
        </q-expansion-item>
        <q-expansion-item default-opened header-class="q-pa-none" class="q-pa-none">
            <template v-slot:header>
                <tips-title title="日志" class="text-h6 full-width" :isAdd="true" @add="handleLogDialog" lineColor="grey-6"></tips-title>
            </template>

        </q-expansion-item>

        <map-dialog :isMapDialog="isMapDialog" :isEdit="false" @update="handleMapDialog" :place.sync="place"></map-dialog>
    </div>

</q-page>
</template>

<script>
import {
    loadShotPlanInfo,
    remindShotplan,
    updateReadStatus
} from 'assets/api/studio/shotplan.js'
export default {
    name: 'ShotplanPage',
    components: {

        MapDialog: () => import('components/MapDialog.vue')
    },
    data() {
        return {
            taskList: [],
            curShotplan: {
                isRemind: 0
            },
            isMapDialog: false,
            place: {

            },
            unReadList: []
        }
    },
    created() {
        this.pid = this.$route.params.pid;
    },
    mounted() {
        console.log(this.$route.query.sp_id);
        if (this.$route.query.sp_id) {
            let sp_id = this.$route.query.sp_id;
            this.handleLoadTaskInfo(sp_id)

        }

        this.projectInfo = this.$store.state.projectinfo;
        // console.log(this.projectInfo);
        this.user = this.$store.state.user;
    },
    beforeDestroy() {
        // this.curShotplan={}
    },
    methods: {
        handleSocket() {
            this.$socket.on(this.curShotplan.sp_id, (data) => {
                console.log('socket data', data);
                this.curShotplan.readList = data;
                this.checkRead()
            })
        },
        getMemberList() {
            let taskList = this.taskList;
            let arr = []
            taskList.forEach(i => {
                arr = arr.concat(i.memberlist)
            })
            let member = {}
            let newMember = arr.reduce((p, i) => {
                member[i['username']] ? '' : member[i['username']] = true && p.push(i)
                return p
            }, [])

            return newMember
        },

        handleRemind() {

            // console.log(newMember);
            let newMember = this.getMemberList()
            let reqData = {
                pid: this.projectInfo.pid,
                p_name: this.projectInfo.name,
                memberList: newMember,
                sp_id: this.curShotplan.sp_id,
                sp_name: this.curShotplan.sp_name
            }
            console.log(reqData);
            remindShotplan(reqData).then(res => {
                console.log(res.data);
                if (res.data.code == 1) {
                    this.$message.success('发送提醒成功！')
                    this.curShotplan.isRemind = 1
                } else {
                    this.$message.error('发送提醒失败！')
                }
            })
        },
        handleTaskDialog() {
            console.log('task');
        },
        handleLogDialog() {
            console.log('log');
        },
        handleNav(item) {

            this.place = item.taskAddress;

            this.isMapDialog = true;
        },
        handleMapDialog(val) {
            this.isMapDialog = !this.isMapDialog

        },
        handleLoadTaskInfo(sp_id) {
            // console.log(this.curShotplan);
            this.curShotplan={}
            loadShotPlanInfo({
                sp_id: sp_id
            }).then(res => {

                if (res.data.code == 1) {
                    let data = res.data.data;
                    let shotplan = data[0];
                    shotplan.sp_stime = this.$moment(shotplan.stime, 'x').calendar()
                    shotplan.date = this.$moment(shotplan.stime, 'x').format('YYYY-MM-DD dddd')
                    if (shotplan.weather != null) {
                        shotplan.weather = JSON.parse(shotplan.weather)
                    }
                    if (shotplan.readList) {
                        shotplan.readList = JSON.parse(shotplan.readList)
                    } else {
                        shotplan.readList = []
                    }


                    shotplan.sp_name = this.$moment(shotplan.stime, 'x').format('YYYY-MM-DD')
                    data.forEach(i => {
                        i.memberlist = JSON.parse(i.memberlist);
                        i.taskAddress = JSON.parse(i.taskAddress)
                        i.stime = this.$moment(i.stime, 'x').calendar()
                        i.etime = this.$moment(i.etime, 'x').format('HH:mm')
                    })

                    this.taskList = data
                    this.curShotplan = shotplan
                    console.log(shotplan);
                    this.checkRead()
                }
            })
        },
        updateUnReadList() {
            let readList = this.curShotplan.readList;
            let memberList = this.getMemberList();
            this.unReadList=[]
            console.log('shotplan', memberList);
            if (readList.length == 0) {
                this.unReadList = memberList
            } else {
                memberList.forEach(i => {
                    var status = 0
                    readList.forEach(item => {
                        if (item.username == i.username) {
                            status = 1
                        }
                    })
                    if (status == 0) {
                        this.unReadList.push(i)
                    }
                })
            }
            console.log('未读', this.unReadList);

        },
        checkRead() {
            console.log('checkread', this.curShotplan);
            if (this.curShotplan.isRemind == 1) {
                let readList = this.curShotplan.readList;
                this.unReadList = []
                let memberList = this.getMemberList();
                if (readList.length > 0) {
                    var status = 0;

                    readList.forEach(item => {
                        if (item.username == this.user.username) {
                            status = 1
                        } else {
                            this.unReadList.push(item)
                        }
                    })

                }

                if (readList.length == 0 || status == 0) {
                    console.log('提交已读状态');
                    let dataList = this.curShotplan.readList;

                    dataList.push(this.user)
                    let reqdata = {
                        sp_id: this.curShotplan.sp_id,
                        readList: dataList
                    }
                    console.log(reqdata);
                    updateReadStatus(reqdata).then(res => {

                        if (res.data.code == 1) {

                        }
                    })
                    this.$socket.emit('updateShotplanReadStatus', this.curShotplan.sp_id, this.curShotplan.readList)
                }
            }
            this.updateUnReadList()

        },
        handlePageHeight(val, i) {

            //  this.scrollStyle.height = i - val - 50 + 'px';

            //  this.handlePageWidth();
            return {
                height: i - val + 'px'
            }

        },
        handleLoadShotPlanInfo(sp_id) {
            loadShotPlanInfo(sp_id).then(res => {
                console.log(res.data);
            })
        }
    }
}
</script>

<style>

</style>
